<template>
	<view class="wanl-signin-log">
		<view class="carousel-container">
			<swiper class="carousel" current="0" circular="true" autoplay="true" interval="3000">
				<swiper-item class="carousel-item"><image style="width: 100%;" src="../../../static/ppt_20230217124104_04.png" /></swiper-item>
				<swiper-item class="carousel-item"><image style="width: 100%;" src="../../../static/111111111111111111.png" /></swiper-item>
			</swiper>
		</view>
		<view class="edgeInsetTop" style="padding-left: 40rpx;"> 推荐人：{{tuijian}}</view>
		<view class="header">
			<view class="text-center">
				<view class="text-sl" style="color: black;;font-size: 52upx;">
					{{jiupiaomoney}}
				</view>
			</view>
		</view>
		<view class="cu-list menu-avatar">
			<view class="cu-item" v-for="(item, index) in dataList" :key="item.id">
				<view class="content">
					<view class="text-sm flex">
						<view class="text-cut">
							{{item.memo}}
						</view> 
					</view>
					<view class="wanl-gray text-sm">{{ timestampToTime(item.creattime) }}</view>
				</view>
				<view class="action" style="width: auto;min-width: none;">
					<view class="wanl-text-yellow text-lg" v-if="item.score<0" >{{item.score}}</view>
					<view class="text-lg text-orange" v-else style="width: auto;">{{item.score}}</view>
				</view>
			</view>
		</view>
		<view class="edgeInsetBottom"></view> 
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			dataList: [],
			reload: false, //判断是否上拉
			total: 0, //数据量
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: '加载中',
				contentnomore: ''
			},
			jiupiaomoney:0,
			tuijian:''
		};
	},
	computed: {
		...mapState(['user'])
	},
	onLoad() {
		this.loadData();
	},
	onPullDownRefresh() {
		this.current_page = 1;
		this.reload = true;
		this.loadData();
	},
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.loadData();
		}
	},
	methods: {
		async loadData() {
			this.$api.post({
				url: '/wanlshop/user/jiupiaoLog',
				data: {
					page: this.current_page
				},
				success: res => {
					uni.stopPullDownRefresh();
					this.dataList = this.reload ? res.data : this.dataList.concat(res.data);//数据 追加
					this.total = res.total; //数据量
					this.current_page = res.current_page; //当前页码
					this.last_page = res.last_page; //总页码
					this.status = res.total == 0 ? 'noMore' : 'more';
				}
			});
			this.$api.post({
				url: '/wanlshop/user/jiupiaomoney',
				success: res => {
					console.log(res)
					this.jiupiaomoney=res.jiupiao,
					this.tuijian=res.tuijianren
				}
			});
		},
		timestampToTime(timestamp) {
			var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
			var D = (date.getDate() < 10 ?'0'+date.getDate():date.getDate()) + ' ';
			var h = date.getHours() + ':';
			var m = date.getMinutes() + ':';
			var s = date.getSeconds();
			return Y+M+D+h+m+s;
		},
		// onScoreRank(){
		// 	this.$wanlshop.to('/pages/user/signin/rank');
		// }
	}
};
</script>

<style>
	.wanl-signin-log .header{
		display: flex;
		/* justify-content: center; */
		align-items: center;
		height: 150rpx;
		padding-left: 40rpx;
	}
	
	.wanl-signin-log .cu-list.menu-avatar>.cu-item .content{
		left: 25rpx;
	}
	
	.carousel-container {
		position: relative;
		// background-color: #FFFFFF;
		border-radius: 18rpx;
		// padding: $block-row-spacing;
		padding: 10rpx 20rpx 10rpx 20rpx;
	}
	
	.carousel {
		height: 450rpx;
		.carousel-item {
			// width: 100%;
			// height: 100%;
			// overflow: hidden;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			image {
				width: 100%;
				height: 360rpx;
				border-radius: 10rpx;
			}
		}
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
	.viewItem {
		padding: 10upx 20upx;
		// .content {
		// display: flex;
		.item {
			display: inline-block;
			// display: flex;
			// flex-direction: column;
			// align-items: center;
			width: 25%;
			text-align: center;
			// height: 230upx;
			.img {
				width: 100upx;
				height: 100upx;
			}
			.tit {
			}
		}
		// }
	}
	.banner-middle {
		// background-color: #FFFFFF;
		.swiper-middle {
			height: 230rpx;
			padding: 0 20rpx;
			.swiper-item {
				width: 100%;
				height: 100%;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
				image {
					width: 100%;
					height: 196rpx;
				}
			}
		}
	}
	.active-section {
		display: flex;
		padding: 0rpx 20rpx;
		.box {
			width: 100%;
			line-height: 0;
			image {
				width: 100%;
			}
		}
		.zuo {
			margin-right: 20rpx;
		}
		.you {
			flex-direction: column;
			justify-content: space-between;
			.youxuan,
			.chaoshi {
				line-height: 0;
			}
		}
	}
	.order-section {
		background-color: #ffffff;
		height: 300rpx;
		padding-top: 6rpx;
		.swiper {
			width: 100%;
			height: 300rpx;
			.swiper-item {
				.type-box {
					height: 100%;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					align-items: center;
					justify-content: space-around;
				}
				.type-item {
					display: flex;
					flex-direction: column;
					width: 25%;
					align-items: center;
					padding: 4rpx 0;
					image {
						width: 80rpx;
						height: 80rpx;
					}
					text {
						font-size: $font-sm + 2;
						line-height: 50rpx;
					}
				}
			}
		}
	}
</style>
